<template>
	<view>
		<view class="banner-box">
			<swiper :autoplay="true" :interval="3000" :duration="1000" @change='swiperChange'>
				<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index"
					@tap="previewImage(item,bannerList)">
					<view class="shop-img">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="tag-box">
				{{Number(currmentDotIndex+1)}}/{{bannerList.length}}
			</view>
		</view>
		<view class="shop-box">
			<view class="info-box">
				<view class="price-box">
					<text>¥{{goodsInfo.price||'--'}}</text>
					<text class="old-price">原价¥{{goodsInfo.marketprice||'--'}}</text>
				</view>
				<view class="shop-name">{{goodsInfo.title||'--'}}</view>
			</view>
			<view class="item-cont">
				<view class="item flexWrap" @tap="showModel()" v-if="specsList.length!=0">
					<text class="item-title">规格</text>
					<text class="icon-more"></text>
				</view>
				<view class="item flexWrapNo">
					<text class="item-title">数量</text>
					<view class="operation-box flexWrapNo">
						<view class="reduce" @tap="reduce()">-</view>
						<view class="num">{{num}}</view>
						<view class="plus" @tap="plus()">+</view>
					</view>
				</view>
				<view class="item flexWrapNo">
					<text class="item-title">配送</text>
					<view class="item-right flexWrap">
						<view>至<text class="white" style="margin-left: 24upx;">貘鱼台球 理想中心</text> </view>
						<text class="icon-more"></text>
					</view>
				</view>
				<view class="item flexWrapNo">
					<text class="item-title">运费</text>
					<view class="item-right flexWrap">
						<view class="white">免运费</view>
						<text class="icon-more"></text>
					</view>
				</view>
				<view class="item">
					<view class="item-right">
						<view class="white">详情</view>
					</view>
				</view>
				<u-parse :content="content" v-if="parseShow" />
			</view>
		</view>
		<view class="specs-box" v-if="specsFlag">
			<view class="close" @tap='closeModel()'>
				<text></text>
				<text></text>
			</view>
			<view class="specs-product flexWrapNo">
				<view class="specs-img" @tap="previewImage(specsImg)">
					<image :src="specsImg"></image>
				</view>
				<view class="specs-price flexWarpColumn">
					<view class="price"><text class="price-icon">￥</text>{{specPrice}}</view>
					<view class="cost-price">￥{{specMarketprice}}</view>
				</view>
			</view>
			<view class="specs-center">
				<view class="specs-cont" v-for="(item,i) in specsList" :key='i'>
					<text class="specs-title">{{item.title}}</text>
					<view class="specs-warp flexWrapNo">
						<text class="specs-item" @click="chooseIt(item,items)" v-for="(items,index) in item.sku_value" :key='index'
							:class="{active: items.active}">{{items.title}}</text>
					</view>
				</view>
			</view>
			<view class="num-box flexWrap">
				<view class="num-title">购买数量</view>
				<view class="opare-box flexWrapNo">
					<view class="opare-btn" @tap='reduce()'>-</view>
					<input v-model="num" />
					<view class="opare-btn" @tap='increase()'>+</view>
				</view>
			</view>
			<view class="confirm-btn" @tap="placeOrder()">立即购买</view>
		</view>
		<view class="mask-wrap" v-if="specsFlag"></view>
		<view class="bottom-box flexWrapNo" @tap="goPage('/pages/shop/placeOrder')">
			<view class="define-btn">确定</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue';
	export default {
		components: {
			uParse
		},
		data() {
			return {
				bannerList: [],
				num: 1,
				goodsId: "",
				goodsInfo: {},
				currmentDotIndex: 0,
				content: {},
				parseShow: false,
				specsFlag:false,
				specsList:[],
				specsIndex:0,
				skuIndex:0,
				specsImg:"",
				val:"",
				specName:"",
				specId:"",
				specIds:"",
				specPrice:"",
				specMarketprice:"",
			};
		},
		onLoad(ops) {
			this.goodsId = ops.goodsId
			this.getGoodsDetails();
		},
		methods: {
			reduce() {
				if (this.num == 1) return;
				this.num--
			},
			plus() {
				this.num++
			},
			// 显示
			showModel() {
				this.specsFlag = true
			},
			// 关闭
			closeModel() {
				this.specsFlag = false
			},
			changeSpecs(specsIndex,skuIndex){
				this.specsIndex=specsIndex
				this.skuIndex=skuIndex
			},
			// 选择商品规格
			chooseIt(item,items){
				// 设置被选中
				item.sku_value.map(iitem => {
					iitem.active = false;
				})
				items.active = !items.active;
				this.getChooseIt()
			},
			getChooseIt(){
				let arr = [];
				let ids=[];
				this.specsList.map(item => {
					this.val = ''
					this.specId=''
					item.sku_value.map(iitem => {
						if (iitem.active) this.val = iitem.title;
						if (iitem.active) this.specId = iitem.id;
					})
					arr.push(this.val);
					ids.push(this.specId)
				})
				if(this.val != ''){
					this.specName = arr.join(' ')
					this.specIds=ids.join(',')
				}
				console.log(this.specIds)
			},
			swiperChange(e) {
				this.currmentDotIndex = e.detail.current
			},
			getGoodsDetails() {
				this.$request.get(this.$api.goodsDetails, {
					id: this.goodsId
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data
						} = res
						for (var i = 0; i < data.sku_spec.length; i++) {
						  for (var j = 0; j < data.sku_spec[i].sku_value.length; j++) {
						    data.sku_spec[i].sku_value[j].active = false
						  }
						}
						this.goodsInfo = data
						this.content = data.content
						this.bannerList = data.images
						this.specsList=data.sku_spec
						this.specPrice=data.price
						this.specMarketprice=data.marketprice
						this.specsImg=data.image
						console.log(this.specsList)
						if (this.content) {
							this.parseShow = true
						}
					}
				})
			},
			placeOrder(){
				console.log(this.specIds.split(',').length)
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 120upx;
	}
	.banner-box {
		height: 750upx;
		margin-top: 28upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.banner-item {
			height: 750upx;

			.shop-img {
				height: 100%;
			}
		}

		.tag-box {
			padding: 16upx 24upx;
			background: rgba(0, 0, 0, .4);
			border-radius: 32rpx;
			z-index: 999;
			position: absolute;
			bottom: 36upx;
			right: 36upx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.shop-box {
		padding: 36upx 34upx;

		.info-box {
			.price-box {
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #26BCFD;

				.old-price {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #82819B;
					margin-left: 18upx;
					text-decoration: line-through;
				}
			}

			.shop-name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 14upx;
			}
		}

		.item-cont {
			margin-top: 50upx;

			.item {
				margin-bottom: 28upx;
				padding-bottom: 28upx;

				.item-title {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #82819B;
					flex: none;
					margin-right: 40upx;
				}

				.specs-box {
					text {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						padding: 14upx 20upx;
						background: rgba(49, 47, 128, .5);
						border-radius: 40rpx;
						margin-right: 20upx;
					}

					.active {
						background: rgba(38, 188, 253, 0.5);
						border: 2rpx solid #5BB9F7;
					}
				}

				.operation-box {
					.reduce {
						width: 80rpx;
						height: 80rpx;
						background: #1D1C5C;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 48rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 80rpx;
						text-align: center;
					}

					.num {
						margin: 0 40upx;
						font-size: 48rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					.plus {
						width: 80rpx;
						height: 80rpx;
						background: #26BCFD;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 48rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 80rpx;
						text-align: center;
					}
				}

				.item-right {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #82819B;
					flex: 1;

					.white {
						color: #FFFFFF;
					}
				}

				.icon-more {
					border-color: #FFFFFF;
				}
			}
		}
	}

	.bottom-box {
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		.define-btn {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 322rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
	.specs-box {
			background: #1D1C5C;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;
			border-radius: 35rpx 35rpx 0px 0px;
	
			.close {
				position: absolute;
				top: 36rpx;
				right: 36rpx;
				z-index: 99;
	
				text {
					width: 4rpx;
					height: 46rpx;
					display: inline-block;
					background: #26BCFD;
					position: absolute;
	
					&:nth-of-type(1) {
						transform: rotate(43deg);
					}
	
					&:nth-of-type(2) {
						transform: rotate(-43deg);
					}
				}
			}
	
			.specs-product {
				align-items: flex-start;
				padding: 46rpx 46rpx 32rpx 46rpx;
				border-bottom: 1rpx solid #E7E7E7;
	
				.specs-img {
					width: 170rpx;
					height: 170rpx;
					margin-right: 15rpx;
					border-radius: 20upx;
					overflow: hidden;
				}
	
				.specs-price {
					height: 160rpx;
					justify-content: space-between;
					.price {
						font-size: 48rpx;
						font-family: NotoSansHans;
						font-weight: 500;
						color: #26BCFD;
	
						.price-icon {
							font-size: 36rpx;
							font-weight: 500;
						}
					}
	
					.cost-price {
						font-size: 28rpx;
						font-family: NotoSansHans;
						font-weight: 400;
						text-decoration: line-through;
						color:#82819B;
						margin-left: 23rpx;
					}
				}
			}
	
			.specs-center {
				padding: 28rpx 30rpx;
	
				.specs-cont {
					.specs-title {
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
					}
	
					.specs-warp {
						margin-top: 23rpx;
						flex-wrap: wrap;
						.specs-item {
							height: 64rpx;
							line-height: 64rpx;
							background: #F5F5F5;
							border-radius: 20rpx;
							font-size: 28rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #3C3C3C;
							margin-right: 20rpx;
							padding: 0 20rpx;
							min-width: 150rpx;
							text-align: center;
							margin-bottom: 30upx;
							box-sizing: border-box;
							border: 1rpx solid #F5F5F5;
						}
	
						.active {
							background: #FAF1F1;
							border: 1rpx solid #26BCFD;
							color: #26BCFD;
						}
					}
				}
			}
			
			.num-box {
				padding: 28rpx 46rpx;
	
				.num-title {
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #82819B;
				}
	
				.opare-box {
					.opare-btn {
						color: #D2D2D2;
						font-size: 48rpx;
						width: 80rpx;
						text-align: center;
					}
	
					input {
						width: 92rpx;
						height: 50rpx;
						line-height: 50rpx;
						background: #F0F0F0;
						// margin: 0 26rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #82819B;
					}
				}
			}
			.confirm-btn {
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				height: 88rpx;
				line-height: 88rpx;
				background:#26BCFD;
				border-radius: 44rpx;
				text-align: center;
				margin: 36rpx 80rpx 36rpx;
			}
		}
</style>